<template>
<!--店铺设置界面-->
<el-dialog :title="$t('setting.route.shopSetDialog.dialogTitle')" :visible.sync="dialogFormVisible" width="300">
    <el-form label-position="left" label-width="100px" :model="shopForm">
        <el-form-item :label="$t('setting.route.shopSetDialog.shopName')">
            <el-input v-model="shopForm.shopName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('setting.route.shopSetDialog.welcomeTip')">
            <el-input v-model="shopForm.welcomeTip"></el-input>
        </el-form-item>
        <el-form-item :label="$t('setting.route.shopSetDialog.phone')">
            <el-input v-model="shopForm.phone"></el-input>
        </el-form-item>
        <el-form-item :label="$t('setting.route.shopSetDialog.address')">
            <el-input v-model="shopForm.address"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t("setting.route.shopSetDialog.dialogCancel")}}</el-button>
        <el-button type="primary" @click="saveShopEvent">{{$t("setting.route.shopSetDialog.dialogOk")}}</el-button>
    </div>
</el-dialog>
</template>

<script>
import {
    getShopDetail,
    saveShopInfo
} from '../api/api';
export default {
    data() {
        return {
            shopForm: {
                shopName: "",
                welcomeTip: "",
                phone: "",
                address: ""
            },
            dialogFormVisible: false,
            addLoading: false
        }
    },
    mounted() {
        getShopDetail().then(res => {
            let {
                msg,
                code
            } = res;
            if (code !== "0") {
                this.$message({
                    message: msg,
                    type: 'error'
                });
            } else {
                this.shopForm = res.data;
            }
        });
    },
    methods: {
        //显示界面
        showShopPage() {
            this.dialogFormVisible = true;
        },
        saveShopEvent() {
            let para = Object.assign({}, this.shopForm);
            saveShopInfo(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.$message({
                        message: "保存店铺信息成功",
                        type: 'success'
                    });
                    this.dialogFormVisible = false;
                    //TODO:需要更新店铺名称
                }
            });
        }
    }
}
</script>

<style scoped>
.userCarousel {
    background-color: #409EFF;
    display: flex;
    justify-content: Center;
    align-items: Center;
    cursor: pointer;
    color: #ffffff;
}
</style>
